<template>
  <div
    v-loading="loading"
    class="special"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="special_home">
      <div v-for="item in specialListGetSvg" :key="item.id" :class="[item.name, 'pointer']" @click="gotoRouter(item)">
        <!-- <div v-html="item.bgUrl" /> -->
        <img :src="'data:image/svg+xml;base64,'+item.bgUrl">
        <div :class="item.name+'_div'" v-html="item.title" />
      </div>
      <div class="special_street_n1">
        <div class="special_street_n1_t">
          <img v-for="item in 5" :key="item" :class="'special_street_n1_'+item" src="~@/assets/img/specialHome/box.png" alt="">
        </div>
        <div class="special_street_n1_b">
          <img v-for="item in 5" :key="item" :class="'special_street_n1_'+item" src="~@/assets/img/specialHome/box.png" alt="">
        </div>
      </div>
      <div class="special_street_n2">
        <img v-for="item in 4" :key="item" :class="'special_street_n2_'+item" src="~@/assets/img/specialHome/box.png" alt="">
      </div>
      <div class="special_street_n3">
        <img v-for="item in 3" :key="item" :class="'special_street_n3_'+item" src="~@/assets/img/specialHome/box.png" alt="">
      </div>
      <div class="special_street_n4">
        <img v-for="item in 4" :key="item" :class="'special_street_n4_'+item" src="~@/assets/img/specialHome/box.png" alt="">
      </div>
      <div class="special_street_n5">
        <img v-for="item in 4" :key="item" :class="'special_street_n5_'+item" src="~@/assets/img/specialHome/box.png" alt="">
      </div>
      <div class="special_street_bo">
        <img src="~@/assets/img/specialHome/bo.png" alt="">
      </div>
      <div class="special_street_tiao">
        <img src="~@/assets/img/specialHome/tiao.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { downFile } from '@/utils/getFiles';
import { getKeyByMenuId } from '@/api/propertyHomePage/index';
export default {
  name: 'SpecialHome',
  data() {
    return {
      specialListGetSvg: [],
      loading: false
    };
  },
  computed: {
    menuList() {
      let list = [];
      this.$store.state.permission.menuList.map(o => {
        if (o.title === '全景图') {
          list = o.children;
        }
      });
      return list.filter(item => item.name.includes('special'));
    }
  },
  watch: {
    specialListGetSvg: {
      deep: true,
      handler: function(value) {
        value.length === this.menuList.length && (this.loading = false);
      }
    }
  },
  async created() {
    // 获取所有图片再显示
    // this.loading = true;
    await this.getSvgAll();
  },
  methods: {
    async getSvgAll() {
      await this.menuList.forEach(async item => {
        const data = {
          id: item.import,
          saveName: item.import
        };
        downFile(data, 'pic').then((res) => {
          res = res.split(',')[1];
          this.specialListGetSvg.push({
            ...item,
            bgUrl: res
          });
        });
      });
    },

    gotoRouter(a) {
      console.log(a);
      localStorage.setItem('specialPanorama', a.parentTitle);
      if (!a.meta) {
        a.meta = {};
        a.meta.title = a.name;
      }
      if (!a.redirect) {
        if (!a.type) {
          this.getKeyByMenuId(a);
        } else {
          this.yewuMenu(a);
        }
      } else {
        const obj = a.children.find(item => item.path === a.redirect);
        this.gotoRouter(obj);
      }
    },
    getKeyByMenuId(a) {
      getKeyByMenuId({
        menuId: a.id
      }).then(res => {
        if (res.success) {
          const params = {
            path: a.path,
            query: {
              type: 0,
              name: a.name,
              title: a.meta.title,
              sId: res.data.sId.split('-')[0],
              key: res.data.key,
              defId: res.data.id,
              bizKey: '',
              flag: 0,
              fileType: res.data.fileType,
              menuId: a.id,
              formGuid: '',
              taskId: '',
              isHideLeft: a.isHideLeft,
              isHideTop: a.isHideTop,
              parentTitle: a.parentTitle
              // isShow: true
            }
          };
          if (a.isTargetNew + '' === '0') {
            this.$router.push(params);
          } else {
            const routeUrl = this.$router.resolve(params);
            const tempwindow = window.open('_blank'); // 先打开页面
            tempwindow.location = routeUrl.href; // 后更改页面地址
          }
        } else {
          this.$message({
            message: '该菜单存在问题，请联系运维人员',
            type: 'warning'
          });
        }
      });
    },
    yewuMenu(a) {
      const params = {
        path: a.path,
        query: {
          title: a.meta.title,
          menuId: a.id,
          flag: 0,
          // isShow: isShow,
          sId: 'TabsTable',
          isHideLeft: a.isHideLeft,
          isHideTop: a.isHideTop,
          parentTitle: a.parentTitle,
          type: 0
        }
      };
        // 不打开新页面
      if (a.isTargetNew + '' === '0') {
        this.$router.push(params);
      } else {
        const routeUrl = this.$router.resolve(params);
        const tempwindow = window.open('_blank'); // 先打开页面
        tempwindow.location = routeUrl.href; // 后更改页面地址
      }
    }
  }
};
</script>

<style lang='scss' scoped>

$text-shadow: 4px 1px 6px rgba(0,0,0,0.50);
$vw:1920px;
/*像素转换相对单位vw*/
@function px2vw($px) {
  @return $px / $vw * 100vw;
}

.special{
  .pointer{
    cursor: pointer;
    z-index: 1;
  }
  // .headerContent{
  //   position: fixed;
  //   width: 100%;
  //   z-index: 2;
  // }
}
.special_home{
  height: 56.25vw;
  background-image: url('~@/assets/img/specialHome/homeBG.png');
  background-size:100% 100%;
  position: relative;
  .special{
    &_structure{
      position: absolute;
      top: 3.5417vw;
      left: 3.0729vw;
      width: px2vw(114px);
      height: px2vw(114px);
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-17px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_engine{
      position: absolute;
      top: 11.5vw;
      left: 3vw;
      width: px2vw(109px);
      height: 5vw;
      img {
        width: 100%;
      }
      &_div{
        // margin-top: px2vw(-20px);
        font-size: 1.25vw;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_gateway{
      position: absolute;
      top: 10vw;
      left: px2vw(136px);
      width: px2vw(151px);
      height: 5vw;
      img {
        width: 100%;
      }
      &_div{
        // margin-top: px2vw(-20px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: right;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_statute{
      position: absolute;
      top: px2vw(107px);
      left: px2vw(508px);
      width: px2vw(265px);
      height: 12.3737vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-140px);
        font-size: px2vw(28px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_risk{
      position: absolute;
      top: px2vw(89px);
      left: px2vw(814px);
      width: px2vw(265px);
      height: 12.2396vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-140px);
        font-size: px2vw(28px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_decision{
      position: absolute;
      top: px2vw(136px);
      left: px2vw(1104px);
      width: px2vw(265px);
      height: 12vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-120px);
        font-size: px2vw(28px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_files{
      position: absolute;
      top: px2vw(255px);
      left: px2vw(1488px);
      width: px2vw(80px);
      height: 5vw;
      img {
        width: px2vw(60px);
      }
      &_div{
        margin-top: px2vw(-10px);
        margin-left: px2vw(-10px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_accounting{
      position: absolute;
      top: px2vw(319px);
      left: px2vw(1502px);
      width: px2vw(100px);
      height: 5vw;
      img {
        width: px2vw(85px);
      }
      &_div{
        margin-top: px2vw(-10px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_reply{
      position: absolute;
      top: 18.3vw;
      left: 25.9vw;
      width: px2vw(100px);
      height: 8.3vw;
      img {
        width: px2vw(86px);
      }
      &_div{
        margin-top: px2vw(-20px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_organization{
      position: absolute;
      top: 25.5vw;
      left: 19.8vw;
      width: px2vw(96px);
      height: 8.1vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-20px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_approval{
      position: absolute;
      top: 35vw;
      left: 25.9vw;
      width: px2vw(130px);
      height: 5vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-20px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_project_management{
      position: absolute;
      top: 38vw;
      left: 35.5vw;
      width: px2vw(130px);
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-20px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_purchase_management{
      position: absolute;
      top: px2vw(749px);
      left: px2vw(895px);
      width: px2vw(130px);
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-20px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_contract_management{
      position: absolute;
      top: 38.6vw;
      left: 56vw;
      width: px2vw(120px);
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-20px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_assets_management{
      position: absolute;
      top: 35.7vw;
      left: 64.8vw;
      width: px2vw(116px);
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-20px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_data_bus{
      position: absolute;
      top: px2vw(570px);
      left: px2vw(1391px);
      width: px2vw(120px);
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-20px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_data_analysis{
      position: absolute;
      top: 30.4vw;
      left: 79.5vw;
      width: 7.5vw;
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-20px);
        font-size: 1.25vw;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_performance_appraisal{
      position: absolute;
      top: 38vw;
      left: 78vw;
      width: 5.5vw;
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        font-size: 1.25vw;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_administrative_office{
      position: absolute;
      top: px2vw(758px);
      left: px2vw(69px);
      width: px2vw(100px);
      height: 6vw;
      img {
        width: px2vw(93px);
      }
      &_div{
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_mobile_platform{
      position: absolute;
      cursor: pointer;
      top: 45.5vw;
      left: 5vw;
      width: 6.8vw;
      height: 6vw;
      img {
        width: 50%;
        margin-left: 25%;
      }
      &_div{
        padding-top: 0.5vw;
        font-size: 1.25vw;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_enforcement_petition{
      position: absolute;
      top: 17.8vw;
      left: 41.1vw;
      width: 6.8vw;
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-50px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_expense_reimbursement{
      position: absolute;
      top: 17.1vw;
      left: 49.6vw;
      width: px2vw(125px);
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-50px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_financial_audit{
      position: absolute;
      top: 18.75vw;
      left: 58.12vw;
      width: px2vw(111px);;
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-50px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_payment_approval{
      position: absolute;
      top: 20.26vw;
      left: 64.5vw;
      width: px2vw(111px);
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-50px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_tax_interface{
      position: absolute;
      top: 27vw;
      left: 44.8vw;
      width: px2vw(98px);
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        margin-top: px2vw(-10px);
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_hand_interface{
      position: absolute;
      top: 27.34vw;
      left: 53vw;
      width: px2vw(91px);
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        // margin-top: px2vw(-10px);
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_bank_interface{
      position: absolute;
      top: 26.8vw;
      left: 61.4vw;
      width: px2vw(78px);
      height: 6vw;
      img {
        width: 100%;
      }
      &_div{
        // margin-top: px2vw(-10px);
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
    &_street_n1{
      position: absolute;
      top: 26.823vw;
      left: 28.75vw;
      width: 8.3vw;
      height: 4.64vw;
      z-index: 9;
      img{
        width: 2.3958vw;
        cursor: pointer;
      }
      &_t{
        position: absolute;
        height: 3vw;
        width: 8.3vw;
      }
      &_b{
        position: absolute;
        height: 3vw;
        top: 2vw;
        width: 8.3vw;
      }
      &_1{
        position: absolute;
        left: 0;
      }
      &_2{
        position: absolute;
        left: 1.25vw;
        top: 0.677vw;
      }
      &_3{
        position: absolute;
        left: 2.8935vw;
        top: 1.0415vw;
      }
      &_4{
        position: absolute;
        right: 1.25vw;
        top: 0.677vw;
      }
      &_5{
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    &_street_bo{
      position: absolute;
      top: 29.53vw;
      left: 32vw;
      width: 9.64vw;
      height: 5.52vw;
      & > img{
        width: 100%;
      }
    }
    &_street_n2{
      position: absolute;
      height: 10vw;
      top: 33.5vw;
      left: 38vw;
      width: 6.3vw;
      img{
        width: 2.3958vw;
        cursor: pointer;
      }
      &_1{
        position: absolute;
        top: 0;
        right: 0;
      }
      &_2{
        position: absolute;
        top: 1vw;
        right: 0.75vw;
      }
      &_3{
        position: absolute;
        top: 2vw;
        right: 1.5vw;
      }
      &_4{
        position: absolute;
        top: 3vw;
        right: 2.25vw;
      }
    }
    &_street_n3{
      position: absolute;
      height: 10vw;
      top: 35vw;
      left: 45vw;
      width: 6.3vw;
      img{
        width: 2.3958vw;
        cursor: pointer;
      }
      &_1{
        position: absolute;
        top: 0;
        right: 0;
      }
      &_2{
        position: absolute;
        top: 1.5vw;
        right: 0.15vw;
      }
      &_3{
        position: absolute;
        top: 3vw;
        right: 0.3vw;
      }
    }
    &_street_n4{
      position: absolute;
      height: 10vw;
      top: 34.5vw;
      left: 56vw;
      width: 6.3vw;
      img{
        width: 2.3958vw;
        cursor: pointer;
      }
      &_1{
        position: absolute;
        top: 0;
        left: 0;
      }
      &_2{
        position: absolute;
        top: 1vw;
        left: 0.3vw;
      }
      &_3{
        position: absolute;
        top: 2vw;
        left: 0.6vw;
      }
      &_4{
        position: absolute;
        top: 3vw;
        left: 0.9vw;
      }
    }
    &_street_n5{
      position: absolute;
      height: 10vw;
      top: 20.8vw;
      left: 70vw;
      width: 6.3vw;
      img{
        width: 2.3958vw;
        cursor: pointer;
      }
      &_1{
        position: absolute;
        top: 1.8vw;
        left: 0;
      }
      &_2{
        position: absolute;
        top: 1.2vw;
        left: 1.5vw;
      }
      &_3{
        position: absolute;
        top: 0.6vw;
        left: 3vw;
      }
      &_4{
        position: absolute;
        top: 0;
        left: 4.5vw;
      }
    }
    &_street_tiao{
      position: absolute;
      top: 32vw;
      left: 68vw;
      width: 3.28vw;
      height: 1.875vw;
      & > img{
        width: 100%;
        cursor: pointer;
      }
    }
    &_sys{
      position: absolute;
      top: px2vw(945px);
      left: px2vw(1793px);
      width: px2vw(114px);
      height: 1.875vw;
      & > img{
        width: 100%;
        cursor: pointer;
      }
      &_div{
        // margin-top: px2vw(-10px);
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        text-shadow: $text-shadow;
      }
    }
  }
}

</style>
